<template>
  <el-dialog
    v-model="dialogTableVisible"
    title="旌龙结算"
    width="630px"
    :show-close='false'
  >
    <div id="print_content">
      <PrintTemplate />
    <el-divider border-style="dashed" content-position="center">裁剪线</el-divider>
    </div>
    <template #footer>
      <el-button type="primary" @click="dialogTableVisible=false">关闭</el-button>
      <el-button type="primary" v-print="print">打印</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import PrintTemplate from '@/views/plateform/Finance/components/PrintTemplate.vue';
import {ref} from 'vue';
const dialogTableVisible = defineModel();
const print =ref({
  id: 'print_content',
  popTitle: '回收车辆报销单', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback () { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
  previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
  openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
  closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted () { console.log('点击v-print绑定的按钮了！') },
  standard: '',
  extraCss:''
})
</script>
<style  lang="scss">
//.el-dialog__body{
//  #print_content {
//    height: 500px;
//    overflow: auto;
//  }
//}
.el-dialog{
  #print_content{
    height: 500px;
    overflow: auto;
  }
  .el-dialog__header{
    .el-dialog__title{
      color: white;
    }
  }

}
</style>